<template>
	<view>
		<goods-list @entergoodsItem='navigatorGoods' :goodsList='goodsList'></goods-list>
		<view class="bottomFont" v-if="flag">
			加载完毕
		</view>
	</view>
</template>

<script>
	import goodsComponents from '../../components/goodsComponents.vue'
	export default {
		data() {
			return {
				goodsList: [],
				indexNumber: 1,
				flag: false
			}
		},
		methods: {
			//获取商品列表
			async getGoodsList(callBack) {
				const res = await uni.request({
					url: 'http://localhost:8082/api/getgoods?pageindex=' + this.indexNumber
				})
				// console.log(res)
				let data = res[1].data
				// console.log(data)
				if (data.status !== 0) {
					return uni.showToast({
						title: '获取数据失败'
					})
				} else {
					this.goodsList = [...this.goodsList, ...data.message];
					callBack && callBack()
					// console.log(this.goodsList)
				}
			},
			//跳转进入商品详情
			navigatorGoods(id){
				uni.navigateTo({
					url:'/pages/goods/goodsDetail/goodsDetail?id='+id
				})
			}
		},
		components: {
			'goods-list': goodsComponents
		},
		onLoad() {
			this.getGoodsList()
		},
		onReachBottom() {
			if (this.goodsList.length < this.indexNumber * 10) {
				return this.flag = true
			}
			this.indexNumber++;
			this.getGoodsList();
			// console.log(this.indexNumber)
		},
		onPullDownRefresh() {
			this.goodsList = [];
			this.indexNumber = 1;
			this.flag = false;
			setTimeout(() => {
				this.getGoodsList(() => {
					uni.stopPullDownRefresh()
				})
			}, 1000);

		}
	}
</script>

<style lang="less" scoped>
	.bottomFont {
		text-align: center;
		width: 750rpx;
		height: 100rpx;
		background: #F5F2F0;
		line-height: 100rpx;
		font-size: 35rpx;

	}
</style>
